<template>
	<view class="content">
		<view class="component-box">
			<!-- 选择 -->
			<view class="item" v-for="(item, index) in tabMenu" :key="index" @tap="activeTab(index)">
				<view class="item-title" :class="[tabSwitch == index ? 'active-item-title' : '']">{{item}}</view>
				<i class="iconfont iconjiantou icon-styl" :class="[tabSwitch == index ? 'active-icon-styl' : '']"></i>
			</view>
			<!-- 科目列表 -->
			<view class='pop-bg' v-if="con1Switch" @tap.stop="closeAll">
				<view class="bg-con1"  v-for="(item, index) in arrBgCon1" :key="index"  @tap="ChangeOpt(item, index,1)">
					<view class="opi-sty3" :class="[con1Current == index ? 'active-opi-sty3' : '']">{{item.subject_name}}</view>
					<i class="iconfont gougou-styl" :class="[con1Current == index ? 'iconduigou' : '']"></i>
				</view>
			</view>
			<!-- 订单状态 -->
			<view class='pop-bg' v-if="con2Switch" @tap.stop="closeAll">
				<view class="bg-con1" v-for="(item, index) in arrBgCon2" :key="index" @tap="ChangeOpt(item, index,2)">
					<view class="opi-sty3" :class="[con2Current == index ? 'active-opi-sty3' : '']">{{item.title}}</view>
					<i class="iconfont gougou-styl" :class="[con2Current == index ? 'iconduigou' : '']"></i>
				</view>
			</view>
		</view>
		<view class="ItemList">
			<view class="conItem" v-for="(item,index) in list" :key="index">
				<view class="conItem_list">
					<view class="conItem_title">
						<view class="conItem_number">订单号：{{item.number}}</view>
						<view class="conItem_state conItem_state1" v-if="item.state == 1">已付款</view>
						<view class="conItem_state conItem_state2" v-if="item.state == 2">未付款</view>
					</view>
					<view class="conItem_sub">
						<view class="conItem_name">学　科：</view>
						<view class="conItem_cont">{{item.subName}}</view>
					</view>
					<view class="conItem_sub">
						<view class="conItem_name">订单名：</view>
						<view class="conItem_cont">{{item.orderName}}</view>
					</view>
					<view class="conItem_title">
						<view class="conItem_time">{{item.time}}</view>
						<view class="conItem_pay"><text>支付金额：</text>￥{{item.money}}</view>
					</view>
					<view class="conItem_button">
						<view class="btn btn1" @click="orderClick(item.state)">订单详情</view>
						<view class="btn btn2" @click="orderClick(item.state)" v-if="item.state == 2">前往支付</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabSwitch: 999,
				tabMenu: ['选择科目', '订单状态'],
				con1Switch: false,
				arrBgCon1: [],
				con1Current: 0,
				con2Switch:false,
				arrBgCon2: [
					{title: '全部'}, 
					{title: '已付款'}, 
					{title: '未付款'},
				],
				con2Current: 0,
				nav2: '',
				student_id: '',
				list: [
					{
						number: '12345678910',
						subName: '语文',
						orderName: '九年级语文模拟试卷解析.doc',
						time: '2015-05-06 12:20',
						money: '8.0',
						state: 2
					},
					{
						number: '12345678910',
						subName: '语文',
						orderName: '九年级语文模拟试卷解析.doc九年级语文模拟试卷解析.doc九年级语文模拟试卷解析.doc九年级语文模拟试卷解析.doc',
						time: '2015-05-06 12:20',
						money: '8.0',
						state: 1
					}
				]
			}
		},
		onLoad() {
			this.getSub();
		},
		methods: {
			getSub() {
				var currentChild = uni.getStorageSync('currentChild');
				this.student_id = currentChild.student_id;
				this.$zapi.apiPost('user/subject.Lists/subjectLists',{student_id:this.student_id}).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						var length = data.length;
						for (var i = 0; i < length; i++) {
							data[i]['subject_name'] = data[i]['subject_name'].replace(/\s+/g, "");
						}
						this.arrBgCon1 = data;
						this.arrBgCon1.unshift({ sid: '', subject_name: '全部' });
					}
				});
			},
			orderClick(state) {
				uni.navigateTo({
					url: 'goods-list-detail?state='+state
				})
			},
			ChangeOpt(item, index,tab) {
				if(tab == 1){
					this.con1Current = index;
				} else if( tab == 2) {
					this.con2Current = index
				}
			},
			activeTab(index) {
				if(this.tabSwitch == 999) {
					this.tabSwitch = index
					if (index == 0) { 
						this.con1Switch = true 
						this.con2Switch = false
					} else if (index == 1) { 
						this.con2Switch = true
						this.con1Switch = false
					}
					return
				}
				this.closeAll()
			},
			closeAll() {
				this.con1Switch = false
				this.con2Switch = false
				this.tabSwitch = 999
			}
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
	.component-box {
		position: fixed;
		top: 0;
		background: #FFFFFF;
		width: 100%;
		height: 93upx;
		display: flex;
		align-items: center;
	}
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 38upx;
		border-right: 1px solid #E5E5E5;
	}
	.item-title {
		color: #333333;
		font-size: 36upx;
		transition: all .3s;
	}
	.active-item-title {
		color: #FF9900;
	}
	.item:last-child{
		border: none;
	}
	.icon-styl {
		font-size: 48upx;
		color: #0D0408;
		transform: rotate(90deg);
		transition: all .3s;
	}
	.active-icon-styl {
		color: #FF9900;
		transform: rotate(-90deg);
	}
	
	.pop-bg {
		position: fixed;
		width: 100%;
		height: calc(100% - 93upx);
		top: 93upx;
		background-color: rgba(0, 0, 0, 0.3);
		transition: opacity 5s;
	}
	.bg-con1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100upx;
		padding-left: 30upx;
		padding-right: 30upx;
		background-color: #ffffff;
		text-align: center;
		border-top: 1px solid #E5E5E5;
	}
	.opi-sty3 {
		color: #0D0408;
		font-size: 32upx;
		text-align: center;
	}
	.active-opi-sty3 {
		color:#FF9900;
	}
	
	.gougou-styl {
		color: #FF9900;
		font-size: 45upx;
	}
	.ItemList{
		margin-top: 113upx;
	}
	.conItem{
		background-color: #FFFFFF;
		margin-top: 20upx;
	}
	.conItem_list{
		margin: 0 30upx;
	}
	.conItem_title{
		display: flex;
		justify-content: space-between;
		padding: 20upx 0;
		border-bottom: 2upx solid #E5E5E5;
	}
	.conItem_number,
	.conItem_cont{
		color: #333333;
		font-size: 34upx;
	}
	.conItem_state{
		font-size: 34upx;
	}
	.conItem_state1{
		color: #00D5A2;
	}
	.conItem_state2{
		color: #FF9900;
	}
	.conItem_sub{
		display: flex;
		justify-content: flex-start;
		padding: 20upx 0;
	}
	.conItem_name{
		color: #999999;
		font-size: 34upx;
		width: 136upx !important;
		white-space: nowrap;
	}
	.conItem_time{
		color: #999999;
		font-size: 28upx;
		margin-top: 20upx;
	}
	.conItem_pay{
		color: #333333;
		font-size: 42upx;
	}
	.conItem_pay text{
		color: #999999;
		font-size: 34upx;
	}
	.conItem_button{
		display: flex;
		justify-content: flex-end;
		padding: 20upx 0;
	}
	.btn{
		padding: 14upx 16upx;
		line-height: 1;
		border-radius: 8upx;
		margin-left: 20upx;
	}
	.btn1{
		color: #00D5A2;
		border: 2upx solid #00D5A2;
	}
	.btn2{
		color: #FF9900;
		border: 2upx solid #FF9900;
	}
</style>
